<template>
  <div>
    <h2>render</h2>
    <anhored-heading :level="4">Hello world!!</anhored-heading>
    <jsx-template :level="1">good day!</jsx-template>
    <html-template :items="items"></html-template>
    <jsx-replace-template :items='items'></jsx-replace-template>
    <v-input @input="handleInput"></v-input>
  </div>
</template>

<script>
import AnhoredHeading from './components/anhoredHeading.vue';
import JsxTemplate from './components/jsx';
import HtmlTemplate from './components/htmlTemplate.vue';
import JsxReplaceTemplate from './components/jsxReplaceTemplate';
import VInput from './components/RenderInput'

export default {
  components: {
    AnhoredHeading,
    JsxTemplate,
    HtmlTemplate,
    JsxReplaceTemplate,
    VInput
  },
  data() {
    return {
      items: [
        {
          name: 'lf'
        },
        {
          name: 'bobo'
        }
      ]
    }
  },
  methods: {
    handleInput(val) {
      console.log(val);
    }
  }
}
</script>

<style>

</style>